import React from 'react';

var inputStyle = {width:"100%",height:"40px","border": "1px solid #f2f2f2",paddingLeft:"20px"};
var Input = React.createClass({
    getInitialState: function() {
        return {
            value: this.props.defaultValue,
            //validationState:this.props.validationState
        };
    },
    componentWillReceiveProps:function(newProps){
        this.setState({
            value: newProps.defaultValue,
            validationState:newProps.validationState
        },this.render);
    },
    handleChange: function(event) {
        this.setState({value: event.target.value});
    },
    getValue:function(){
        return this.state.value;
    },
    focus:function(event){
        var input = event.target;
        input.style.outlineStyle = "double";
        input.style.outlineColor = "#c5c5c5";
    },
    //isValidated:function(){
    //    switch(this.state.validationState){
    //        case "success":
    //            return "input-success";
    //            break;
    //        case "warning":
    //            return "input-warning";
    //            break;
    //        case "error":
    //            return "input-error";
    //            break;
    //        case "default":
    //            return "";
    //            break;
    //        default:
    //
    //    }
    //},
    onblur:function(event){
        var input = event.target;
        input.style.outline = "none";
        if(typeof this.props.onBlur == "function"){
            this.props.onBlur();
        }

    },
    render:function(){
        //var validationState = this.isValidated();
        return(
            <div className={"FormComponent "}>
                <span className="form_control_name" >{this.props.title}</span><b/>
                <div  className="form_control">
                    <input className="form_input"
                        style={inputStyle}
                           value={this.state.value}
                           onFocus={this.focus}
                           onBlur={this.onblur}
                           onChange={this.handleChange} />
                </div>

            </div>
        )
    }
})

module.exports = Input;